<script setup lang="ts">
import type { ResourcesItem } from '@/services/type'
// const horizontalData = ref<ResourcesItem[] | undefined>([])
  // const bannerData = ref<BannerItemType[]>([])
interface Props {
  horizontalData: ResourcesItem[]
}
const props = defineProps<Props>()
// console.log(props.horizontalData)
// 获取数据
// indexApi().then((res)=>{
//   // horizontalData.value = res.data.blocks[1].(creatives[0]as CreativesInnerType).resources
//   if(res.data&&res.data.blocks[1]&&res.data.blocks[1].creatives[0]&&res.data.blocks[1].creatives[0].resources){
//     horizontalData.value = res.data.blocks[1].creatives[0].resources
//   }
// })

// 跳每日推荐和排行榜
const goItem = (title: string) => {
  if(title === '每日推荐'){
    uni.navigateTo({
      url: '/pages/recommend/recommend'
    })
  }else if(title === '排行榜'){
    uni.navigateTo({
      url: '/pages/rankingList/rankingList'
    })
  }
}
</script>

<template>
  <view class="line2">
    <view class="item" v-for="item in props.horizontalData" :key="item.uiElement.image.imageUrl" @click="goItem(item.uiElement.mainTitle.title)">
      <image :src="item.uiElement.image.imageUrl" mode="widthFix" class="image"></image>
      <view class="title">{{ item.uiElement.mainTitle.title }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.line2::-webkit-scrollbar{
  display: none;
}

.line2{
  display: flex;
  height:160rpx;
  overflow-x:scroll ;
  .item{
    width: 150rpx;
    height: 175rpx;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .image{
      width: 60%;
      border-radius: 50%;
      background-color: #c84341;
    }
    .title{
      margin-top: 10rpx;
      width: 100%;
      text-align: center;
      font-size: 20rpx;
    }
  }
}

// ::v-deep .uni-scroll-view-content{
//   display: flex;
//   height:160rpx;
//   // white-space: nowrap;
//   .item{
//     width: 150rpx;
//     height: 175rpx;
//     flex-shrink: 0;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     .image{
//       width: 60%;
//       border-radius: 50%;
//       background-color: #c84341;
//     }
//     .title{
//       margin-top: 10rpx;
//       width: 100%;
//       text-align: center;
//       font-size: 20rpx;
//     }
//   }
// }
</style>